<template>
	<view>
		<view class="top-bg"></view>
		<view class="content-wrap">
			<view class="content-card">
				<!-- 日期 -->
				<view class="content-date-wrap yf-flex-between">
					<view class="date-time">
						{{dayObj.time}}
					</view>
					<view class="content-date">
						<view class="content-date-text">
							{{dayObj.year}}
						</view>
						<view class="content-date-text">
							{{dayObj.week}}
						</view>
					</view>
				</view>
				<!-- 标题 -->
				<view class="title-content yf-flex-between">
					<view class="title-text">
						今日外出打卡记录
					</view>
					<view class="application-wrap yf-flex-left" @click="canApprove==0?jumpTo('outForm'):''">
						<image :src="`/static/common/applyFor${canApprove}.png`" mode="" class="applyFor"></image>
						<view class="application-text" :style="{color:canApprove==1?'#828282':''}">
							外出申请
						</view>
					</view>
				</view>
				<view class="clockin-content" v-if="clockList.length>0">
					<m-clock-in :list="clockList"></m-clock-in>
				</view>
				<!-- 缺省页 -->
				<view class="empty-content" v-else>
					<tui-no-data imgUrl="/static/common/empty_icon.png" imgWidth="460" marginTop="70" :fixed="false"
						imgHeight="380"><span style="font-size: 32rpx;">今天还没有打卡记录哦~</span>
					</tui-no-data>
				</view>
				<!-- 定位 -->
				<view class="address-wrap yf-flex" :style="{bottom:address.length>12?'148rpx':'182rpx'}" v-if="isclock==0">
					<tui-icon name="position" color="#3291F8" size="20" style="margin-top: 4rpx;"></tui-icon>
					<view class="address-text">
						{{address||"未获取到位置"}}
					</view>
					<tui-icon name="refresh" color="#828282" size="20" @click="getSetting()" style="margin-top: 4rpx;"></tui-icon>
				</view>
				<!-- 打卡按钮 -->
				<view class="clockin-btn yf-flex-center" :class="[isclock==1?'disabled':'']"
					@click="isclock==0?jumpTo('clockForm',{info:JSON.stringify(clockInfo)}):''" v-if="isUserPhone">
					打卡
				</view>
				<button class="clockin-btn yf-flex-center" :class="[isclock==1?'disabled':'']"
					open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" :disabled="isclock==1"
					v-else>打卡</button>
			</view>
		</view>
		<tui-tabbar :tabBar="tabBar" :current="current" @click="tabbarSwitch" color="#9B9B9B" selectedColor="#3291F8"
			iconSize="48">
		</tui-tabbar>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		yearTime,
		week
	} from '@/common/util.js'
	import mClockIn from "@/components/hq-ui/m-clock-in"
	import indexConfig from "@/config/index.config.js"
	import QQMapWX from '@/common/qqmap-wx-jssdk.min.js';
	var qqmapsdk = new QQMapWX({
		key: indexConfig.qqmapKey
	});
	export default {
		components: {
			mClockIn
		},
		data() {
			return {
				current: 0,
				recordList: [], //打卡记录 
				clockInfo: {}, //打卡内容
				clockList: [], //打卡记录
				isclock: 1, //0可以打卡1不可以打卡
				canApprove: 1, //0可以申请1不可以申请
				dayObj: { //时钟
					year: "", //
					time: "",
					week: ''
				},
				timer: null,
				longitude: "",
				latitude: "",
				address: "", //地址
			};
		},
		computed: {
			...mapGetters(['tabBar', "hasLogin"]),
			...mapState(["isUserPhone"]),
		},
		onLoad() {
			console.log(1111)
			this.timer = setInterval(() => { // 时钟
				this.dayObj.year = yearTime('year')
				this.dayObj.time = yearTime('time')
				this.dayObj.week = week()
			}, 1000)

		},
		onUnload() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
		onShow() {
			//是否可以打卡
			if (this.hasLogin) {
				this.punchBaseInfo();
			}
			// console.log(uni.getSystemInfoSync())
		},
		methods: {
			...mapMutations(['SET_USERPHONE']),
			getPhoneNumber(e) {
				let that = this;
				console.log(e, 'ccccccc')
				if (e.detail.errMsg == 'getPhoneNumber:ok') { //允许授权执行跳转
					if (!e.detail.code) return;
					that.$apis
						.punchCheckPhone({
							code: e.detail.code
						})
						.then((res) => {
							console.log("codelogin", res);
							if (res.code == 0) {
								this.SET_USERPHONE(true);
								this.jumpTo('clockForm', {
									info: JSON.stringify(this.clockInfo)
								}); //更新手机号校验状态 
							}
						}).catch(() => {
							setTimeout(() => {
								this.$api.hideLoading()
							}, 3000)
						});
				} else {
					wx.showModal({
						title: '请授权手机号',
						showCancel: false,
						content: '未授权无法打卡',
						success: function(res) {}
					})
				}
			},
			/*判断是否已经授权 */
			getSetting() {
				const that = this
				uni.getSetting({
					success(res) {
						if (res.authSetting['scope.userLocation']) {
							//获取位置
							that.getLocationInfo();
						} else {
							that.getAuthorize()
						}
					}
				})
			},
			// 自动授权 
			getAuthorize() {
				let that = this
				uni.authorize({
					scope: 'scope.userLocation',
					success(res) {
						//获取位置
						that.getLocationInfo();
					},
					// 授权失败 
					fail(err) {
						uni.showModal({
							title: '提示',
							content: '请授权位置获取当前位置!',
							showCancel: false,
							confirmText: '确认授权',
							success() {
								uni.openSetting({
									success(res) {
										if (res.authSetting['scope.userLocation'] == true) {
											//获取位置
											that.getLocationInfo();
										}
									},
									fail(err) {}
								})
							}
						})
					}
				})
			},
			// 解析地址微信
			resolvedAddress(latitude, longitude) {
				let that = this;
				qqmapsdk.reverseGeocoder({
					coord_type: 5, 
					location: {
						latitude,
						longitude
					},
					success: function(e) {
						console.log(e.result);
						if (e.result && e.result.address_component) {
							// that.addrtitle = e.result.formatted_addresses.recommend; //地址名
							that.address = e.result.address_component.province + e.result.address_component
								.city + e.result.address_component.district + (e.result.address_reference.town
									.title || '') + (e.result.address_component.street_number || e.result
									.address_component.street || "");; //地址
						}
					},
					fail: err => {
						console.log(err);
					}
				});
			},
			// 获取当前定位
			getLocationInfo() {
				return new Promise((resolve) => {
					uni.getLocation({
						type: "gcj02",
						success: (res) => {
							console.log(res, "resresresresresres")
							let {
								longitude,
								latitude
							} = res;
							// "28.154641927083333", "115.76130126953124"
							this.resolvedAddress(latitude, longitude)
							this.latitude = latitude;
							this.longitude = longitude;
						},
						fail(err) {
							console.log(err)
						},
					});
				});
			},
			//是否可以打卡
			punchBaseInfo() {
				this.$apis.punchBaseInfo().then((res) => {
					this.$api.hideLoading()
					console.log(res, '@@@@@@@@')
					if (res.code == 0) {
						this.clockInfo = res.data;
						this.isclock = res.data.canPunch
						this.canApprove = res.data.canApprove
						if (res.data.canPunch == 0) { //0 ： 允许 1：不允许
							this.dayPunchList(); //打卡记录
							this.getSetting(); //获取定位
						}
					} else {
						// this.$api.msg(res.message)
					}
				}).catch(() => {
					setTimeout(() => {
						this.$api.hideLoading()
					}, 1500)
				})
			},
			//打卡记录
			dayPunchList() {
				this.$apis.dayPunchList().then((res) => {
					this.$api.hideLoading()
					if (res.code == 0) {
						this.clockList = res.data
					} else {
						// this.$api.msg(res.message)
					}
				}).catch(() => {
					setTimeout(() => {
						this.$api.hideLoading()
					}, 1500)
				})
			},
			// 跳转
			jumpTo(url, param) {
				this.$Router.navigateTo(url, param)
			},
			tabbarSwitch(e) {
				console.log(e);
				console.log(e.index);
				if (e.index == this.current) return
				if (e.index == (this.tabBar.length - 2)) {
					this.$Router.switchTab('tabBar-dataDisplay');
				} else if (e.index == (this.tabBar.length - 1)) {
					this.$Router.switchTab('tabBar-user');
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F4F8FB;
	}
	.tui-text-scale {
		font-size: 38rpx !important;
	}

	.top-bg {
		background: #3291F8;
		width: 100%;
		height: 200rpx;
	}

	.content-wrap {
		padding: 0 30rpx;
		margin-top: -168rpx;
		width: 100%;

		.content-card {
			min-height: 84vh;
			border-radius: 20rpx;
			background: #fff;
			padding: 50rpx 37rpx;
			position: relative;
			box-shadow: 0px 2rpx 6rpx 0px rgba(180, 180, 180, 40);

			.content-date-wrap {
				margin-bottom: 50rpx;

				.date-time {
					color: #000;
					font-size: 12+36rpx;
					font-weight: bold;
				}

				.content-date {
					.content-date-text {
						color: #828282;
						font-size: 12+24rpx;
						text-align: right;
					}

				}
			}

			.title-content {
				.title-text {
					font-size: 12+24rpx;
					color: #828282;
				}

				.application-wrap {
					.applyFor {
						width: 38rpx;
						height: 38rpx;
						margin-right: 13rpx;
					}

					.application-text {
						color: #3291F8;
						font-size: 12+24rpx;
					}
				}
			}

			.address-wrap {
				position: absolute;
				left: 0;
				bottom: 148rpx;
				width: 100%;
				justify-content: center;
				.address-text {
					margin: 0 16rpx;
					font-size: 12+24rpx;
					max-width: 440rpx;
					text-align: center;
				}
			}

			.clockin-btn {
				position: absolute;
				left: 50%;
				bottom: 50rpx;
				margin-left: -120rpx;
				width: 240rpx;
				height: 80rpx;
				border-radius: 10rpx;
				background: #3291F8;
				color: #fff;
				font-size: 12+28rpx;
				box-shadow: 0px 2rpx 20rpx 0px rgba(157, 204, 255, 100);
				border: none;
			}

			.disabled {
				background: #BEBEBE;
				box-shadow: 0px 2rpx 20rpx 0px rgba(190, 190, 190, 100);
				border: none;
			}
		}
	}
</style>